import styles from './Assets.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { FC } from 'react'
import {
  Typography,
  Input,
  Image,
  Button as AntdButton,
  Tabs,
  TabsProps,
} from 'antd'
import { Card } from '@/components/universal/Card/Card'
import { ListResponsive } from '@/components/universal/ListResponsive/ListResponsive'
import { useNavigate } from 'react-router-dom'
import { IconFolder } from '@arco-design/web-react/icon'

const Assets = () => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const navigation = useNavigate()

  const items: TabsProps['items'] = [
    { key: '1', label: '全部' },
    { key: '2', label: '文本' },
    { key: '3', label: '图像' },
    { key: '4', label: '模型' },
    { key: '5', label: '视频' },
    { key: '6', label: '音频' },
  ]

  return (
    <div {...styleClass(['layout'])}>
      <div {...styleClass(['header-layout'])}>
        <Typography.Text {...styleClass(['header-title'])}>
          设计资产
        </Typography.Text>
        <div {...styleClass(['header-suffix-layout'])}>
          <AntdButton
            {...styleClass([], { color: c('primary') })}
            type={'link'}
          >
            管理
          </AntdButton>
          <AntdButton type={'default'}>导入</AntdButton>
          <AntdButton type={'primary'}>导出</AntdButton>
        </div>
      </div>
      <div {...styleClass(['filter-layout'])}>
        <Tabs
          {...styleClass(['filter-tabs'])}
          defaultActiveKey="1"
          items={items}
        />

        <div {...styleClass(['filter-suffix-layout'])}>
          <AntdButton
            {...styleClass([], { color: c('primary') })}
            type={'link'}
          >
            高级搜索
          </AntdButton>
          <Input.Search
            {...styleClass([], { width: '100%' })}
            placeholder="input search text"
            allowClear
          />
        </div>
      </div>
      <ListResponsive
        {...styleClass(['list-layout'], { gap: 16, minWidth: 400 })}
      >
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/1e325dcfa266f422.png'}
          title={'设计素材库'}
          assetsNum={324}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/3345a3a4faba57bb.png'}
          title={'设计案例库'}
          assetsNum={99}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/9e740eaf292fd748.png'}
          title={'工程材料库'}
          assetsNum={36}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/51faea5ed2402e02.png'}
          title={'产品零部件库'}
          assetsNum={36}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/b88b9c0d7a94e3f2.png'}
          title={'产品工艺库'}
          assetsNum={8}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/949e670d61da60e2.png'}
          title={'商业构成库'}
          assetsNum={12}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/30bbf8b2a91fb666.png'}
          title={'人本构成库'}
          assetsNum={20}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/e2c1cdbbbecc5666.png'}
          title={'艺术构成库'}
          assetsNum={472}
        />
        <AssetsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/611cde9be8b705f0.png'}
          title={'技术构成库'}
          assetsNum={80}
        />
      </ListResponsive>
    </div>
  )
}

export default Assets

interface IAssetsCard {
  imgUrl?: string
  title?: string
  assetsNum?: number
}
const AssetsCard: FC<IAssetsCard> = ({
  imgUrl = '',
  title = '',
  assetsNum = 1,
}) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  return (
    <Card {...styleClass(['card-wrapper'])}>
      <div {...styleClass(['card-img-wrapper'])}>
        <Image width={'100%'} height={152} src={imgUrl} preview={false}></Image>
      </div>
      <div {...styleClass(['card-info-wrapper'])}>
        <div {...styleClass(['card-info-title-wrapper'])}>
          <IconFolder {...styleClass(['card-info-title-icon'])} />
          <Typography.Text {...styleClass(['card-info-title-text'])} ellipsis>
            {title}
          </Typography.Text>
        </div>
        <Typography.Text
          {...styleClass(['card-info-assets-num'])}
        >{`${assetsNum}个资产`}</Typography.Text>
      </div>
    </Card>
  )
}
